<template>
  <div>
    <el-table border
              size="mini"
              ref="goodsTable"
              highlight-current-row
              :data="currentData">
      <span slot="empty"
            :closable="false"
            type="warning">
        暂无相关物品信息</span>
      <template v-for="(column, index) in columns">
        <el-table-column :key="index"
                         :prop="column.prop"
                         :label="column.name"
                         :show-overflow-tooltip="true" />
      </template>
    </el-table>
    <goods-total v-if="totalData"
                 :totalData="totalData"
                 @input="adjustment" />
    <el-pagination background
                   layout="total, sizes, prev, pager, next, jumper"
                   class="mt10"
                   :total="records.length"
                   :page-sizes="pageSizeOptions"
                   :page-size.sync="pageSize"
                   :current-page.sync="page"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" />
  </div>
</template>

<script>
import GoodsTotal from "./GoodsTotal.vue";
export default {
  name: "Goods",
  components: {
    GoodsTotal
  },
  props: {
    totalData: {
      type: Object,
      default: () => { }
    },
    records: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      isShow: false,
      keyIndex: 0,
      columns: [
        { name: "物品名称", prop: "goodsName" },
        { name: "重量", prop: "weight" },
        { name: "体积", prop: "volume" },
        { name: "数量", prop: "quantity" },
        { name: "总价值", prop: "value" },
        { name: "批次", prop: "batchNo" },
        { name: "备注", prop: "desc" }
      ],
      total: 0,
      pageSizeOptions: [10, 20, 50, 100],
      page: 1,
      pageSize: 10,
      currentData: []
    };
  },
  watch: {
    records (value) {
      this.currentData = JSON.parse(JSON.stringify(value)).splice(0, this.pageSize);
    }
  },
  created () {
    this.currentData = JSON.parse(JSON.stringify(this.records)).splice(0, this.pageSize);
  },
  methods: {
    // 分页数量改变
    handleSizeChange (value) {
      let arr = JSON.parse(JSON.stringify(this.records)).splice(0, value);
      this.currentData = [...arr];
      this.page = 1;
      this.pageSize = value;

    },
    // 当前页数改变
    handleCurrentChange (value) {
      let arr = JSON.parse(JSON.stringify(this.records)).splice(
        (value - 1) * this.pageSize,
        value * this.pageSize
      );
      this.currentData = [...arr];
      this.page = value;
    },
    adjustment (value, addition) {
      this.$emit("input", value, addition);
    }
  }
};
</script>
<style scoped lang="scss">
.mt10 {
  margin-top: 10px;
}
</style>
